<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>banner</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="1CSS/style.css">
</head>

<body>
    <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
    <div class="main" id="main">
        <div class="menuBox"></div>
        <!-- ！内容显示级大写在上 -->
        <!-- ！有分级都要盒子，遇到内容前要盒子 -->
        <div class="subMenu" id="subMenu">
            <div class="innerBox">
                <div class="sub-inner-box">
                    <div class="title">手机、配件</div>
                    <div class="sub-row">
                        <span class="bold mr10">手机通讯：</span>
                        <a href="">手机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">手机维修</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">以旧换新</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">手机配件：</span>
                        <a href="">手机壳</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">手机存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">数据线</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">充电器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电池</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">运营商：</span>
                        <a href="">中国联通</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中国移动</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中国电信</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">智能设备：</span>
                        <a href="">智能手环</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">智能家居</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">智能手表</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">娱乐：</span>
                        <a href="">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">音响</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">收音机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">麦克风</a>
                    </div>
                </div>
            </div>
            <div class="innerBox">
                <div class="sub-inner-box">
                    <div class="title">电脑</div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑：</span>
                        <a href="">笔记本</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">平板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">电脑配件：</span>
                        <a href="">显示器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">CPU</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">主板</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电源</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">显卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">其他配件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">游戏设备：</span>
                        <a href="">游戏机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">耳机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">游戏软件</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">网络产品：</span>
                        <a href="">路由器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">网络机顶盒</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">交换机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">存储卡</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">网卡</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">外部产品：</span>
                        <a href="">鼠标</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">键盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">U盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">移动硬盘</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">鼠标垫</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">电脑清洁</a>
                    </div>
                </div>
            </div>
            <div class="innerBox">
                <div class="sub-inner-box">
                    <div class="title">家用电器</div>
                    <div class="sub-row">
                        <span class="bold mr10">电视：</span>
                        <a href="">国产品牌</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">韩国品牌</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">欧美品牌</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">空调：</span>
                        <a href="">显示器</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">柜式</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">中央</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">壁挂式</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">冰箱：</span>
                        <a href="">多门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">对开门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">三门</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">双门</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">洗衣机：</span>
                        <a href="">滚筒式洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">迷你洗衣机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">洗烘一体机</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨房电器：</span>
                        <a href="">油烟机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">洗碗机</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">燃气灶</a>
                    </div>
                </div>
            </div>
            <div class="innerBox">
                <div class="sub-inner-box">
                    <div class="title">家具</div>
                    <div class="sub-row">
                        <span class="bold mr10">家纺：</span>
                        <a href="">被子</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">枕头</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">四件套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">床垫</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">灯具：</span>
                        <a href="">台灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">顶灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">节能灯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">应急灯</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">厨具：</span>
                        <a href="">烹饪锅具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">餐具</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">菜板刀具</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">家装：</span>
                        <a href="">地毯</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">沙发垫套</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">装饰字画</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">照片墙</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">窗帘</a>
                    </div>
                    <div class="sub-row">
                        <span class="bold mr10">生活日用：</span>
                        <a href="">收纳用品</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">浴室用品</a>
                        <span class="ml10 mr10">/</span>
                        <a href="">雨伞雨衣</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="menuContent" id="menu-content">
            <!-- !innerBox不在menuBox内部，原因不能被menuBox 透明度0.5影响 -->
            <div class="mennuItem" divindex = "0">
                <a href="javasrcipt:void(0)">
                    <span>手机、配件</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="mennuItem" divindex = "1">
                <a href="javasrcipt:void(0)">
                    <span>电脑</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="mennuItem" divindex = "2">
                <a href="javasrcipt:void(0)">
                    <span>家用电器</span>
                    <i class="icon">&#xe665;</i>
                </a>
            </div>
            <div class="mennuItem" divindex = "3">
                <a href="javasrcipt:void(0)">
                    <span>家具</span>
                    <i class="icon">&#xe665;</i><!-- ？iconFont查 -->
                </a>
            </div>
        </div>
        <!-- 焦点图 -->
        <div class="banner" id="banner">
            <a href="">
                <div class="bannerSide slide1"><img src="img/bg1.jpg" alt="" id="bannerImg1"></div>
            </a>
            <a href="">
                <div class="bannerSide slide2"><img src="img/bg2.jpg" alt="" id="bannerImg2"></div>
            </a>
            <a href="">
                <div class="bannerSide slide3"><img src="img/bg3.jpg" alt="" id="bannerImg3"></div>
            </a>
        </div>
        <!-- banner图上button -->
        <!-- !banner左右切换按钮html用a标签 -->
        <!-- !要提取出被js调用标签。需要设置id -->
        <a href="javasrcipt:void(0)" class="button pre" id="pre"></a><!-- !href="javasrcipt:void(0)"a标签没有链接 -->
        <a href="javasrcipt:void(0)" class="button next" id="next"></a>
        <!-- banner图上圆标签 -->
        <div class="dots" id="dots">
            <span class="active" spanindex="0"></span> <!-- !<span> 用于对文档中的行内元素进行组合。 -->
            <span id="span2" spanindex="1"></span><!-- ！自定义属性作为标签索引 -->
            <span id="span3" spanindex="2"></span>
        </div>
    </div>

    <script src="js/script.js"></script>
</body>

</html>